Navigation Bars

hr.icon

ナビゲーションバーは、アプリ画面の上部、ステータスバーの下に表示され、階層化された一連の画面を移動することができます。

新しい画面が表示されると、バーの左側に、前の画面のタイトルが表示された戻るボタンが表示されます。

ナビゲーションバーの右側には、アクティブなビュー内のコンテンツを管理するための「編集」または「完了」ボタンなどのコントロールが含まれることもあります。

スプリットビューでは、ナビゲーションバーはスプリットビューの1つのペインに表示されることがあります。

ナビゲーションバーは半透明で、背景色が付いていることもあり、キーボードが画面上にあるとき、ジェスチャーが発生したとき、またはビューのサイズが変更されたときに非表示になるように設定することが可能です。

https://gyazo.com/c464170220c1daa817548613c02504f2

より没入感のある体験を提供するために、一時的にナビゲーションバーを隠すことを検討してください。

たとえば、「写真」では、ユーザーが全画面写真を表示すると、ナビゲーションバーとその他のインターフェイス要素が非表示になります。

このような動作をさせる場合は、タップなどの簡単なジェスチャーでナビゲーションバーを元に戻せるようにします。

Navigation Bar Titles

ナビゲーションバーに現在のビューのタイトルを表示することを検討してください。

ほとんどの場合、タイトルは、人々が何を見ているのかを理解するのに役立ちます。

しかし、ナビゲーションバーにタイトルを付けることが冗長に思える場合は、タイトルを空白にすることができます。

例えば、「ノート」では、コンテンツの最初の行で必要なすべてのコンテキストが提供されるため、現在のノートのタイトルは付けません。

文脈を特に強調したい場合に、大きなタイトルを使用します。

大きなタイトルはコンテンツと競合してはいけませんが、アプリによっては、大きなタイトルの太いテキストが、閲覧や検索をする人の方向性を決めるのに役立つ場合があります。

たとえば、タブ形式のレイアウトでは、大きなタイトルによってアクティブなタブを明確にし、ユーザーが一番上までスクロールしたことを示すことができます。

電話ではこの方法を採用し、ミュージックではアルバム、アーティスト、プレイリスト、ラジオなどのコンテンツ領域を区別するために大きなタイトルを使用しています。

iOS 13以降では、大きなタイトルのナビゲーションバーには、デフォルトで背景素材や影が含まれません。

また、大きなタイトルは、ユーザーがコンテンツをスクロールし始めると、標準のタイトルに切り替わります。

https://gyazo.com/9ebea6fdfd16ee6ee3e3b2b4a2727c9c

https://gyazo.com/4c93664e1cc4561e953290ec0947f299

大きなタイトルのナビゲーションバーの境界線を隠すことを検討します。

iOS 13以降では、バーの影を消すことで、ナビゲーションバーの下の境界線を隠すことができます（コンテンツエリアをスクロールすると、境界線は自動的に再表示されます）。

ボーダーレススタイルは、タイトルとコンテンツの間の接続感を高めるため、大きなタイトルのナビゲーションバーでうまく機能します。

しかし、標準的なタイトルのナビゲーションバーでは、タイトルとボタンが区別しにくくなるため、ボーダーレススタイルはあまりうまく機能しないかもしれません。

ただし、iPadのスプリットビューでは、プライマリビューとセカンダリビューの両方でボーダーレススタイルを使用することで、両者の一貫性を維持することができます。

Navigation Bar Controls

ナビゲーションバーに多くのコントロールを詰め込み過ぎないようにする。

一般的に、ナビゲーションバーには、ビューの現在のタイトル、戻るボタン、およびビューのコンテンツを管理する1つのコントロールしか含まれていないはずです。

ナビゲーションバーにセグメンティドコントロールを使用する場合、バーには、セグメンティドコントロール以外のタイトルやコントロールを含めるべきではありません。

ナビゲーションバーにカスタムグリフを作成する場合は、以下のサイズを使用し、必要に応じてバランスを調整します。

table:Target sizes - Maximum sizes

Target sizes Maximum sizes

24x24 pt (72x72 px @3x) 28x28 pt (84x84 px @3x)

24x24 pt (48x48 px @2x) 28x28 pt (56x56 px @2x)

標準の戻るボタンを使用する。

人々は、標準の戻るボタンで情報の階層をたどることができることを知っています。

しかし、カスタムの戻るボタンを実装する場合は、戻るボタンのように見えること、人々が期待するように動作すること、インターフェースの残りの部分と一致すること、アプリ全体で一貫して実装されていることを確認します。

システムが提供する戻るボタンのアイコンをカスタム画像で置き換える場合、カスタムのマスク画像も提供します。

iOSはこのマスクを使用して、遷移中にボタンのタイトルをアニメーション化します。

複数セグメントのパンくず経路を含めない。

戻るボタンは常に、前の画面に戻るという単一のアクションを実行します。

現在の画面への完全なパスがないと迷子になる可能性がある場合、アプリの階層をフラットにすることを検討してください。

テキストタイトルのボタンには、十分なスペースを確保してください。

ナビゲーションバーに複数のテキストボタンがある場合、それらのボタンのテキストが一緒に表示され、ボタンの区別がつかなくなることがあります。

ボタンとボタンの間に固定スペースを挿入することで、区切りをつけることができます。

ナビゲーションバーにセグメンティドコントロールを使用し、アプリの情報階層をフラットにすることを検討してください。

ナビゲーションバーにセグメンティドコントロールを使用する場合は、階層の最上位レベルのみに使用し、下位レベルでは正確な戻るボタンのタイトルを選択するようにしてください。

https://gyazo.com/014e6e6d01845275f5b3ff4a7994956a